<template>
  <div>
         <el-select  v-model='value' clearable placeholder="请选择" @change="handleCurrentChange(1)" style="margin-bottom:20px;">
          <el-option
            v-for="(item,index) in LX"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <el-table
          :data="capital"
          border
          style="width: 100%">
          <el-table-column v-for="(item,index) in capitalTit" :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width">
          </el-table-column>
        </el-table>
        <div style="margin: 30px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
        </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value:'',
      id:this.$route.params.id,
      LX:[],
      capitalTit:[{
          prop:'cXmlx',
          label:'类型',
          width: '180'
        },{
          prop:'fZhze',
          label:'账户总额',
          width: '180'
        },{
          prop:'fBdje',
          label:'操作金额',
          width: '180'
        },{
          prop:'fKyye',
          label:'可用余额',
          width: '180'
        },{
          prop:'fDjje',
          label:'冻结金额',
          width: '180'
        },{
          prop:'fDsje',
          label:'待收金额',
          width: '180'
        },{
          prop:'tDate',
          label:'记录时间',
          width: '180'
        },{
          prop:'cBdsm',
          label:'备注',
          width: '180'
        }
      ],
      capital:[],
      
      total: 0,
      pageSize: 20,
    }
  },
  methods: {
    handleCurrentChange(val) {
       this.getTableDate(val)
    },
    leixingFn(){
      this.$get(this,{api:'member//loadMoneyRecordType.do?',data: {fUid:this.id}
      }).then(function(data){
        this.LX = data.data.content
      }.bind(this))
    },
    getTableDate (page) {
      this.$get(this,{api:'member/loadMoneyRecord.do',data: {
        fUid:this.id,
        cXmlx:this.value,
        pageSize: this.pageSize,
        page
      }
      }).then(({data})=>{
        console.log(data)
        if (data.state === 0) {
          if (page == 1) {
            this.total = data.content[0];
          }
          this.capital = data.content[1];
          
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  },
  mounted () {
    this.getTableDate(1)
    this.leixingFn()
  }
}
</script>


